<template>
  <div class="todo-container">
    <ol>
      <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
    </ol>
    <div class="input">
      <input type="text" v-model="item">
      <button v-on:click="submitTodo">提交</button>
      <button @click="change1($event)">提交</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'todo',
  data() {
    return {
      todos: [
        'item',
        'item1',
        '学习',
        '打游戏',
      ],
      item: ''
    }
  },
  created() {
    console.log('todo created')
  },
  mounted() {
    console.log('todo mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  },
  methods: {
    change1(e) {
      // console.log(this.$data)
      // console.log(e)
      // this.$set(this.todos, 1, 'new value')
      // Vue.set(this.todos, 1, 'new value')
      // this.todos[1] = 1
      // this.todos = ()
    },
    submitTodo() {
      // this.todos.push(this.item)
      // [...]
      // console.log(this.item)
      this.todos = [...this.todos, this.item]
      // this.todos = this.todos.concat([this.item])
      this.item = ''
    }
  }
}
</script>

<style>

</style>